<script lang="ts" setup>
// #region 引入包, 函数和组件
// import { ref } from "vue"

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const formData = defineModel('formData', {
  default: {
    id: 0,
    username: '',
    realname: '',
    age: 0,
    sex: 0,
    birthday: '',
    avatar: '',
    city: '',
    address: '',
  },
})
const show = defineModel('show')
const { showType } = defineProps<{
  showType: string
}>()
// #endregion

// #region // 变量

// #endregion

// #region // 函数
// 点击确认事件
const confirm = () => {
  show.value = false
}
// 上传成功回调
const handleAvatarSuccess = (res: { url: string }) => {
  formData.value.avatar = res.url
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <div class="dialog_pop">
    <el-dialog v-model="show" v-if="showType" :title="showType">
      <template #default>
        <el-form v-if="formData" :model="formData">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="formData.realname"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="formData.age"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
              <el-radio :value="1">男</el-radio>
              <el-radio :value="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker v-model="formData.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-image style="width: 100px; height: 100px" :src="formData.avatar" fit="cover" />
          </el-form-item>
          <el-form-item label="城市" prop="city">
            <el-input v-model="formData.city"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="formData.address"></el-input>
          </el-form-item>

        </el-form>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="confirm">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="sass" scoped></style>
